<template>
  <div>
    <div>
      <div class="Echarts">
        <div id="myechars" style="width: 600px; height: 400px"></div>
      </div>
      <el-dialog
        title="图标汇报"
        @opened="myEcharts"
        v-model="dialogVisible"
        width="45%"
        center
      >
      </el-dialog>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import moment from "moment";
import * as echarts from "echarts";
export default {
  data() {
    return {
      formDatas: {},
      form: {
        id: "",
        name: "",
        detail: "",
        sponsor: "",
        time: "",
        properties: "",
      },
      dialogFormVisible: false,
      dialogVisible: false,
      currentPage: 1,
      pageSize: 5,
      total: 10,
      small: false,
      background: true,
      disabled: false,
    };
  },

  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    submit() {
      this.$router.replace("/declaration");
    },
    handleSizeChange(val) {
      axios
        .post("/project", {
          page: this.currentPage,
          pageSize: val,
        })
        .then((res) => {
          let r = res.data;
          this.total = r.total;
          this.formDatas = r.datas;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleCurrentChange(val) {
      axios
        .post("/project", {
          page: val,
          pageSize: this.pageSize,
        })
        .then((res) => {
          let r = res.data;
          this.total = r.total;
          this.formDatas = r.datas;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    dialog: function (t) {
      t.time = moment(String(t.time)).format("YYYY-MM-DD hh:mm:ss");
      this.form = t;
      this.dialogFormVisible = true;
    },
    myEcharts() {
      var myChart = echarts.init(document.getElementById("myechars"));
      //配置图表
      var option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "各系申报情况",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [],
          },
        ],
      };
      myChart.setOption(option);
      axios.post("/project/all").then((res) => {
        let r = res.data;
        if (r.flag === true) {
          console.log(r.datas)
          myChart.setOption({
            series: [{
              data: r.datas
            }]
          })
        } else {
          alert(r.msg);
        }
      }).catch((err) => {
        console.log(err);
      });
    },
  },

  mounted() {
    this.handleCurrentChange(1);
    this.myEcharts();
  },
  watch: {
    $route: "handleCurrentChange",
  },
};
</script>

<style scoped>
.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bottom span {
  font-size: 13px;
  color: #999;
}
</style>
